<template>
<!--
1.Token鉴权登录
2.初步搭建模块配置页面
-->
	<div>
		<div class="logo-box" :class="animate">
			<h3 style="text-align: center; line-height: 45px; margin: 0px; padding: 0px">EShopCore</h3>
		</div>
		<el-menu
			:default-active="activeIndex"
			:collapse="isCollapse"
			router
			@select="handleSelect"
			@open="handleOpen"
			@close="handleClose"
			class="el-menu-vertical-demo"
			background-color="#545c64"
			text-color="#fff"
			active-text-color="#ffd04b">
			<el-menu-item index="/Home/Index">
				<i class="el-icon-s-marketing"></i>
				<span slot="title">销量信息</span>
			</el-menu-item>
			<el-menu-item index="/ModuleConfiguration/ModuleConf">
				<i class="el-icon-s-operation"></i>
				<span slot="title">模块配置</span>
			</el-menu-item>
			<el-submenu index="2">
				<template slot="title">
					<i class="el-icon-location"></i>
					<span>导航一</span>
				</template>
				<el-menu-item-group>
					<template slot="title">分组一</template>
					<el-menu-item index="2">选项1</el-menu-item>
					<el-menu-item index="2-2">选项2</el-menu-item>
				</el-menu-item-group>
				<el-menu-item-group title="分组2">
					<el-menu-item index="2-3">选项3</el-menu-item>
				</el-menu-item-group>
				<el-submenu index="2-4">
					<template slot="title">选项4</template>
					<el-menu-item index="2-4-1">选项1</el-menu-item>
				</el-submenu>
			</el-submenu>
			<el-menu-item index="3" disabled>
				<i class="el-icon-setting"></i>
				<span slot="title">设置</span>
			</el-menu-item>
		</el-menu>
	</div>
</template>

<script>
export default {
	name: "Nav",
	props: ["isCollapse"],
	data() {
		return {
			activeIndex: "/Home/Index",
			animate: "",
		}
	},
	methods: {
		/**
		 * 菜单激活回调
		 */
		handleSelect(key, keyPath) {
			// console.log(key, keyPath);
			this.activeIndex = key;
		},
		/**
		 * 子菜单打开回调
		 */
		handleOpen(key, keyPath) {
			console.log(key, keyPath);
		},
		/**
		 * 子菜单关闭回调
		 */
		handleClose(key, keyPath) {
			console.log(key, keyPath);
		}
	},
	watch: {
		/**
		 * 监听菜单展开/收起
		 * 用于 LOGO 的显示和隐藏
		 */
		isCollapse: {
			handler(newValue) {
				if (newValue == false) {
					this.animate = "animate__animated animate__backInLeft";
				} else {
					this.animate = "animate__animated animate__bounceOutRight disappear";
				}
			}
		}
	}
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 220px;
	min-height: 400px;
}

.el-menu-vertical-demo:not(.el-menu--collapse),
.el-menu--collapse {
	border-right: 0px;
}

.logo-box {
	height: 45px;
	color: white;
	transition: all 1.25s;
}

.disappear {
	/*height: 0px;*/
	width: 0px;
}
</style>